<template>
    <div id="leftLevel">
        <div class="bg-color-black">
            <div class="d-flex pt-2 pl-2">
                <span style="color:#5cd9e8">
                    <icon name="chart-line"></icon>
                </span>
                <div class="d-flex">
                    <span>养殖所需概况</span>
                </div>
            </div>
            <div class="d-flex jc-center body-box">
                <dv-scroll-board class="leftLoop" :config="config" @click="onCountyRowClick" style="width: 100%;height:4.1rem" />
            </div>
        </div>
    </div>
</template>

<script>
    import { getChinaJson, getProvinceJSON, getCityJSON, getOptionData } from "../api/get-json";

    export default {
        name: "leftLevel",
        props: {
            areaData: {
                type: Object,
                default: () => { }
            },
        },
        watch: {
            areaData(val) {
                this.areaDataObj = val;
                console.log('this.areaDataObj')
                console.log(this.areaDataObj)
                this.config.data = this.areaDataObj.feeds;
                this.setData();
            }
        },
        data() {
            return {
                countyCheckData: [],
                areaDataObj: {
                    areaCode: "450000",
                    areaLevel: "province",
                    name: "广西",
                    areaName: "广西壮族自治区",
                    value: 500,
                },
                config: {
                    header: ["所需名称", "需求量(吨/月)"],
                    rowNum: 6, //表格行数
                    headerHeight: 35,
                    headerBGC: "#0f1325", //表头
                    oddRowBGC: "#0f1325", //奇数行
                    evenRowBGC: "#171c33", //偶数行
                    index: true,
                    columnWidth: [60],
                    align: ["center"],
                    data: [],
                },
            }
        },

        mounted() {
            this.setData();
            // this.sliderScroll();
        },
        methods: {
            // sliderScroll() {
            //     let scroll = document.getElementsByClassName("scroll-box");
            //     let parent = document.getElementById('parent');
            //     let time = setInterval(function () {
            //         // console.log(parent.scrollTop)
            //         parent.scrollTop++;
            //     }, 100);
            //     scroll[0].addEventListener("mouseover", function () {
            //         clearInterval(time);
            //     });
            //     scroll[0].addEventListener("mouseout", function () {
            //         time = setInterval(function () {
            //             parent.scrollTop++;
            //         }, 100);
            //     })
            // },
            setData() {

                getOptionData().then(res => {
                    let list = res.data;
                    var count = 0;
                    for (var i = 0; i < list.length; i++) {
                        if (list[i].label === this.areaData.areaName) {
                            this.sum = list[i].value;
                            this.areaData.value = list[i].value;
                            break;
                        }

                    }
                    var feeds = [];
                    for (var i = 0; i < list.length; i++) {

                        if (list[i].type === 'feed' && list[i].pid !== 0) {
                            var data = [];
                            data[0] = list[i].label;
                            data[1] = Number(list[i].value)*Number(this.sum)*10;
                            feeds.push(data);
                            count = count + 1;
                        }
                    }
                    this.config.data = feeds;
                    this.config = { ...this.config };
                    console.log("this.config.data")
                    console.log(this.config)
                });

                // this.config.data = [
                //     ['北京', "25.5"],
                //     ['上海', "5"],
                //     ['杭州', "6.8"],
                //     ['广州', "7"],
                //     ['大连', "9.8"],
                //     ['沈阳', "12.0"],
                //     ['常州', "14.3"],
                //     ['无锡', "1.5"],
                //     ['西安', "4.9"],
                //     ['株洲', "7.8"],
                // ];

            },
            onCountyRowClick(row) {
                console.log(row);
            }

        },

    }
</script>

<style lang="scss" scoped>
    #leftLevel {
        padding: 0.2rem;
        height: 5.125rem;
        min-width: 3.75rem;
        border-radius: 0.0625rem;

        .bg-color-black {
            height: 4.8125rem;
            border-radius: 0.125rem;
        }

        .text {
            color: #c3cbde;
        }

        #parent::-webkit-scrollbar {
            display: none;
            /* Chrome Safari */
        }

        #parent {
            scrollbar-width: none;
            /* firefox */
            -ms-overflow-style: none;
            /* IE 10+ */
            overflow-x: hidden;
            overflow-y: auto;
        }
    }

    ::v-deep#leftLoops {
        padding: 0.2rem;
        height: 5rem;
        border-radius: 0.0625rem;

        .bg-color-black {
            height: 4.2rem;
            border-radius: 0.125rem;
        }

        .text {
            color: #c3cbde;
        }

        .color0 {
            color: #ff5722;
        }

        .color1 {
            color: #409EFF;
        }
    }
</style>